<template>
	<view class="u-checkbox-group u-clearfix">
		<slot></slot>
	</view>
</template>

<script>
	import Emitter from '../../libs/util/emitter.js';
	
	export default {
		name: 'u-checkbox-group',
		mixins: [Emitter],
		props: {
			
			max: {
				type: [Number, String],
				default: 999
			},
			
			
			
			
			
			
			
			
			disabled: {
				type: Boolean,
				default: false
			},
			
			name: {
				type: [Boolean, String],
				default: ''
			},
			
			labelDisabled: {
				type: Boolean,
				default: false
			},
			
			shape: {
				type: String,
				default: 'square'
			},
			
			activeColor: {
				type: String,
				default: '#2979ff'
			},
			
			size: {
				type: [String, Number],
				default: 34
			},
			
			width: {
				type: String,
				default: 'auto'
			},
			
			wrap: { 
				type: Boolean,
				default: false
			},
			
			iconSize: {
				type: [String, Number],
				default: 20
			},
		},
		data() {
			return {
			}
		},
		created() {
			
			this.children = [];
		},
		methods: {
			emitEvent() {
				let values = [];
				this.children.map(val => {
					if(val.value) values.push(val.name);
				})
				this.$emit('change', values);
				
				
				setTimeout(() => {
					
					this.dispatch('u-form-item', 'on-form-change', values);
				}, 60)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-checkbox-group {
		/* #ifndef MP || APP-NVUE */
		display: inline-flex;
		flex-wrap: wrap;
		/* #endif */
	}
</style>
